<!DOCTYPE html> 
<html> 
	<head> 
        <title>ZenTXT</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="js/jquery.mobile-1.0.1.min.css" />
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery.mobile-1.0.1.min.js"></script>

        <script>
            /*$('#my-collaspible').bind('expand', function () {
                alert('Expanded');
            }).bind('collapse', function () {
                alert('Collapsed');
            });*/
            /*$("div:jqmData(role='collapsible')").each(function(){
                bindEventTouch($(this)); 
            });

            function bindEventTouch(element) {
                element.bind('tap', function(event, ui) {
                   if(element.hasClass('ui-collapsible-collapsed')) {
                        alert(element.attr('id')+' is closed');
                    } else {
                        alert(element.attr('id')+' is open');
                    }
                });
            }*/
            function load()
            {
                $("div:jqmData(role='collapsible')").each(function(){
                    console.log('zzz');
                    bindEventTouch($(this)); 
                });
                    
                function bindEventTouch(element) {
                    element.bind('tap', function(event, ui) {
                       if(element.hasClass('ui-collapsible-collapsed')) {
                            alert(element.attr('id')+' is closed');
                        } else {
                            alert(element.attr('id')+' is open');
                        }
                    });
                }
            }
        </script>
    </head> 
    <body onload="load()"> 
        <div data-role="page">

            <div data-role="header">
                <h1>Revisions</h1>
            </div><!-- /header -->

            <div data-role="content"class="ui-body ui-body-b">	
                <div data-role="collapsible-set" id="my-collaspible">

                    <div data-role="collapsible" data-collapsed="true" id='1'>
                    <h3>Section 1</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible" id='2'>
                    <h3>Section 2</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible" id='3'>
                    <h3>Section 3</h3>
                    <p>I'm the collapsible set content for section C.</p>
                    </div>
                    
                    <div data-role="collapsible">
                    <h3>Section 4</h3>
                    <p>I'm the collapsible set content for section D.</p>
                    </div>
                    
                </div>
            </div><!-- /content -->
        </div><!-- /page -->

        <div data-role="page" id="home">

            <div data-role="header">
                <h1>ZenTXT</h1>
            </div><!-- /header -->

            <div data-role="content" >
                <a href="/suggestions">Suggestions</a>
                <a href="/files">Files</a>
                <a href="{{ login_url }}">Login</a>

                <p><a href="#two" data-role="button">Show page "two"</a></p>
                <p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
            </div><!-- /content -->

            <div data-role="footer" data-theme="d">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->

        <div data-role="page" id="two" data-theme="a">
        </div><!-- /page two -->

        <div data-role="page" id="popup">
        </div><!-- /page popup -->

    </body>
</html>
